<template>
  <base-breadcrumb :title="titleName">
    <!-- <a-card  :bordered="false"  >
      <title-name title="审批"></title-name>
      <a-form-model ref="ruleForm" :model="form" :rules="rules"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-model-item
                    label="审批意见" prop=" " >
              <BaseInput v-model="form.designDemandType"  type="textarea" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="当前节点名称" prop="branchId" >
              <BaseInput v-model="form.designDemandType"   placeholder="请输入" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="审批人" prop="branchId" >
              <BaseInput v-model="form.designDemandType"    placeholder="请输入" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="审批时间" prop="branchId" >
              <BaseInput v-model="form.designDemandType"    placeholder="请输入" disabled/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="当前滞留时间" prop="branchId" >
              <BaseInput v-model="form.designDemandType"   placeholder="请输入" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="支持人员" >
              <a-select show-search :filter-option="filterOption"  v-model="form.projectManager">
                <a-select-option v-for="item in projectManagers" :key="item.id" :value="item.id">{{item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>


        <a-row :gutter="24">
          <a-col :md="8" :sm="8">
            <a-form-item
                    label="签字编码"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
              <BaseInput  v-model="form.signNum" />
            </a-form-item>
          </a-col>
          <a-col :md="16" :sm="16">
            <a-form-item
                    :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                    :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
              <div class="signBtn" @click="getSignImg"><a-button type="primary" >确定签字</a-button></div>

              <div class="signImg"  >
                {{imgUrl}}
              </div>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24" class="overfloat">
          <a-col>
            <div class="floatRight">
              <a-button type="" style="margin-right: 20px;" @click="handelUnApproval">审批不通过</a-button>
              <a-button type="primary" @click="handelApproval">审批通过</a-button>
            </div>
          </a-col>
        </a-row>

        <title-name title="审批流程信息"></title-name>
        <a-table pagination="false" bordered row-key="id" :columns="columnApprove"   :data-source="dataSource">
          <span slot="operation" slot-scope="text, record">
          <template>
           <a @click="handleSub(record)">查看</a>
          </template>
        </span>
        </a-table>


        <a-modal width="700px" v-model="visible" :title="title" >
          <template slot="footer">
            <a-button key="back" @click="handleCancel">
              关闭
            </a-button>
          </template>
          <a-form :model="forms"  ref="form2">
            <a-row :gutter="24">
              <a-col :md="24" :sm="24">
                <a-form-item
                        label="审批意见"
                        :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                        :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                  <BaseInput type="textarea" v-model="forms.remark" disabled/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="12" :sm="12">
                <a-form-item
                        label="审批人"
                        :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                        :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                  <BaseInput v-model="forms.replier" disabled/>
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="12">
                <a-form-item
                        label="审批时间"
                        :labelCol="{ lg: { span:5 }, sm: { span: 5 } }"
                        :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                  <BaseInput v-model="forms.contactInfo" disabled />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="12" :sm="12">
                <a-form-item
                        label="节点名称"
                        :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                        :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                  <BaseInput v-model="forms.replier" disabled />
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="12">
                <a-form-item
                        label="滞留时间"
                        :labelCol="{ lg: { span:5 }, sm: { span: 5 } }"
                        :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                  <BaseInput v-model="forms.contactInfo" disabled />
                </a-form-item>
              </a-col>
            </a-row>

          </a-form>
        </a-modal>

      </a-form-model>

    </a-card> -->
    
    <BaseAudit />
    <a-card :bordered="false" style="over-flow:scroll">
      <title-name v-if="type=='edit'" title="编辑设计需求申请"></title-name>
      <title-name v-if="type=='view'" title="查看设计需求申请"></title-name>
      <title-name v-if="type=='add'" title="新增设计需求申请"></title-name>
      <a-form-model ref="ruleForm" :model="form" :rules="rules"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
        <a-row>
          <a-col :md="8" :sm="8">
            <a-form-model-item
                    label="设计需求类型" prop="designDemandTypeId" >
                       <a-select placeholder="请输入"  :disabled="type=='view' || type=='approve'" v-model="form.designDemandTypeId">
                         <a-select-option v-for="item in typeList" :key="item.id">{{item.name}}</a-select-option>
                       </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item
                    label="设计需求名称" prop="designDemandName" >
              <BaseInput :disabled="type=='view'  || type=='approve'"  v-model="form.designDemandName" 
                       placeholder="请输入"  />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row> 

          <!-- 项目部 -->
          <a-col :md="8" :sm="8"  >
            <a-form-model-item label="单位名称"
                          :labelCol="{lg: {span: 6}, sm: {span:6}}"
                          :wrapperCol="{lg: {span: 18}, sm: {span: 18} }" prop="branchId">
              <SelectSubCompany :disabled="type=='view'  || type=='approve'"  placeholder="请选择" v-model="form.branchId"></SelectSubCompany>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8"   >
            <a-form-model-item label="项目名称"
                          :labelCol="{lg: {span: 6}, sm: {span:6}}"
                          :wrapperCol="{lg: {span: 18}, sm: {span: 18} }" prop="projectId">
              <SelectProject :disabled="type=='view'  || type=='approve'"  placeholder="请选择" v-model="form.projectId" @change="changeProject" :isClear="false"
                              :form="form" keyValue="branchId"></SelectProject>
            </a-form-model-item>
          </a-col>
        <!-- <a-col :md="8" :sm="8" v-if="projectLevel&& !branchLevel && !companyLevel"> -->
        <!-- <a-col :md="8" :sm="8" >
          <a-form-model-item label="项目名称" prop="projectId" >
            <a-select  :disabled="type=='view'"  @change="handleChangeProject" v-model="form.projectId"  @select="selectProject(form.projectId)">
              <a-select-option v-for="item in project" :key="item.code" :value="item.code">{{item.name}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col> -->
          <a-col :md="8" :sm="8"  >
            <a-form-model-item
                    label="项目编号" prop="projectNum" >
              <BaseInput v-model="form.projectNum" disabled></BaseInput>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="8" :sm="8" >
            <a-form-model-item
                    label="项目设计管理类别" prop="designType" >
              <BaseInput v-model="form.designType" disabled></BaseInput>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8" >
            <a-form-model-item
                    label="提出部门" prop="proposeDeptId" > 
              <a-select placeholder="请选择" :disabled="type=='view'  || type=='approve'"   v-model="form.proposeDeptId">
                <a-select-option v-for="item in deptList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :md="8" :sm="8" v-if="projectLevel&& !branchLevel && !companyLevel"> -->
          <a-col :md="8" :sm="8" >
            <a-form-model-item
                    label="提出人" prop="proposePersonId" > 
              <a-select placeholder="请输入" :disabled="type=='view'  || type=='approve'"   v-model="form.proposePersonId">
                <a-select-option v-for="item in memberList" :key="item.employeeId" :value="item.employeeId">{{item.employeeName}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <!-- 公司-分公司 -->
        
        <a-col :md="8" :sm="8" v-if="branchLevel || companyLevel">
          <a-form-model-item
                  label="单位名称" prop="branchName" >
            <BaseInput v-model="form.branchName" disabled></BaseInput>
          </a-form-model-item>
        </a-col>
          <a-col :md="8" :sm="8" v-if="branchLevel || companyLevel">
            <a-form-model-item
                    label="提出部门" prop="proposeDept" >
              <BaseInput v-model="form.proposeDept" disabled></BaseInput>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8" v-if="branchLevel || companyLevel">
            <a-form-model-item
                    label="提出人" prop="person" >
              <BaseInput v-model="form.person" disabled></BaseInput>
            </a-form-model-item>
          </a-col>
        <a-row>
          <a-col :md="8" :sm="8">
            <a-form-model-item
                    label="创建人" >
              <BaseInput v-model="form.creatorName" disabled></BaseInput>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item
                    label="创建时间" >
              <BaseInput v-model="form.createTime" disabled></BaseInput>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="24" :sm="24">
            <a-form-model-item  label="需求概述" prop="information" >
              <editor-bar  :disabled="type=='view'  || type=='approve'"  v-model="form.information" :isClear="isClear" @change="change"></editor-bar> 
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
  
      <title-name title="上传相关附件"></title-name>
      <div>
        <a-row>
          <a-col :md="24" :sm="19">
            <div class="table-operator">
            <!-- <u-table
                    :listUrl="listUrl"
                    :uploadList="uploadList"
                    :deleteUrl="deleteUrl"
                    :businessId="businessId"
                    :reqMethod="reqMethod"
                    businessCode="PM24"></u-table> -->
          <u-table
            :uploadArrys="uploadArrys"
            :businessCode="businessCode"
            :listUrl="listUrl"
            :uploadList="uploadList"
            :businessId="businessId"
            :deleteUrl="deleteUrl"
            @fileArrysData="fileArrysDatas"></u-table>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-card>
    <div class="footer page-btn-right-top">
      <a-button type="default"  @click="goBack">关闭</a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
  import { STable, Ellipsis } from '@/components'
  import EditorBar from '@/components/Editor/editor' 
  import {addBasic ,getProjectType} from '@/api/design/plotsPlan'
  import { getScoreList  ,addScoreList, editScoreList } from '@/api/evaluate'
  import { addDemandList,getDetails ,editDemandList } from '@/api/design/demand'
  import  { getTypes,getUsersDetail,getOrgUsers} from '@/api/commons'
  import { themeChoose } from '@/mixin/mixin'
import BaseAudit from './components/BaseAudit'
  const columns = [
    {
      title: '序号',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '计划事项',
      dataIndex: 'name'
    },
    {
      title: '计划时间',
      dataIndex: 'count',
    },
    {
      title: '责任人',
      dataIndex: 'score',
    },
    {
      title: '责任人员工编号',
      dataIndex: 'prepared',
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' }
    }
  ]
  const  columnApprove = [
    {
      title: '审批序号',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '审批人',
      dataIndex: '',
    },
    {
      title: '审批时间',
      dataIndex: '',
    },
    {
      title: '节点名称',
      dataIndex: '',
    },
    {
      title: '滞留时间',
      dataIndex: '',
    },
    {
      title: '审批意见',
      dataIndex: '',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' }
    }
  ]

  export default {
    mixins:[themeChoose],
    components:{
      STable,
      EditorBar,
      BaseAudit
    },
    data(){
      return{
        title:'审批信息详情',
        columnApprove,
        titleName:'',
        dataSource:[],
        fileArrysDatas:[],
        forms:{},
        projectManagers:[],

        // 查询参数
        queryParam: {},

        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          const requestParameters = Object.assign({}, parameter, this.queryParam)
          return getScoreList(requestParameters)
            .then(res => {
              return res.data
            })
        },
        selectedRowKeys:'',
        selectedRows:'',
        type:'',
        confirmLoading:false,
        columns:'',
        id:'',
        // 附件上传
        listUrl:'',
        deleteUrl:'',
        uploadArrys:[],
        uploadList:' ',
        proposeDept:{},
        memberList:[],
        businessId:' ',
        businessCode:'PM24',
        reqMethod:'post',
        name:'',
        typeList:[],
        deptList:[],
        deptId:'',
        proposePerson:{},
        designType:[],
        test:'',  
            isClear: false, 
            information:"" ,
        editorContent: '',
        status:'',
        projectLevel:false,//是否为项目部层级
        branchLevel:false,//是否为分公司层级
        companyLevel:false,//是否为公司层级
        pageType:'',
        jobsList:[],
        userId:'',
        branchName:'',
        user:'',
        type:'',
        disabled:false,
        form:{
          createTime:this.getNowTime(),
          creatorName:''
        },
        visible:false,
        rules: {
            designDemandTypeId: [{ required: true, message: '请选择设计需求类型', trigger: 'change' }],
            designDemandName: [{ required: true, message: '请输入设计需求名称', trigger: 'blur' }],
            branchId: [{ required: true, message: '请选择单位名称', trigger: 'change' }],
            projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
            proposeDeptId: [{ required: true, message: '请选择提出部门', trigger: 'change' }],
            proposePersonId: [{ required: true, message: '请选择提出人', trigger: 'change' }],
            information: [{ required: true, message: '请输入需求概述', trigger: 'blur' }],
        },
      }
    },
    computed: {
      rowSelection() {
        return {
          selectedRowKeys: this.selectedRowKeys,
          selectedRows: this.selectedRows,   // 当前行所有数据
          onChange: this.onSelectChange
        }
      }
    },
    created() {
      this.userId = JSON.parse(sessionStorage.getItem('ycloud-user_info')).id
      this.form.creatorName = JSON.parse(sessionStorage.getItem('ycloud-user_info')).employee.name
      this.id = this.$route.query.id
      this.status = this.$route.query.status
      this.type = this.$route.query.type
      if(this.type=='add'){
        this.titleName="新增设计需求申请"
      }else if(this.type=='edit'){
        this.titleName="编辑设计需求申请"
      }
      this.getTypes()
      this.getDetails()
      this.getUsersDetail()
      if(this.type=='approve'){
        this.getProjectManager()
      }
      // this.getjobsList()
      // this.getScoreList()
    },
    // mounted(){
    //     var editor = new E('#editorElem')
    //     editor.customConfig.onchange = (html) => {
    //       this.editorContent = html
    //     }
    //     editor.create()  
    // },
    methods:{
      handelUnApproval(){  // 审批不通过
        this.$confirm({
          title: '警告提醒！',
          content: '确定审批不通过？',
          okType: 'danger',
          onOk() {

          },
          onCancel() {

          },
        });
      },

      handelApproval(){    // 审批通过  判断(支持人员必填)
        this.$confirm({
          title: '警告提醒！',
          content: '确定审批通过？',
          okType: 'danger',
          onOk() {

          },
          onCancel() {
          },
        });
      },
      changeProject(value){
        this.deptList =[]
        this.memberList = []
        getProjectsDel({projectId:value}).then(res=>{
          this.form.designType = res.data.designName
          this.form.projectNum = res.data.projectNum
          this.form.designId = res.data.designId
          this.deptId = res.data.projectDeptOrgId
          // this.form.proposeDeptId=''
          // this.form.proposePersonId=''
        })
          getDept({id:this.deptId}).then(res=>{
            this.deptList = res.data
          })
          getOrganizePeopleList({id:value}).then(res=>{
            this.memberList = res.data
          })
      },
      getProjectManager() {
        getOrgUsers(this.queryData).then(res => {
          console.log("返回人员数据：",res.data)
          this.projectManagers = res.data
        })
      },
      getDetails(){
        if(this.id){
          getDetails({id:this.id}).then(res=>{
            this.form = res.data
            getOrganizePeopleList({id:this.form.projectId}).then(res=>{
              this.memberList = res.data
            })
          })
          getDept({id:this.form.projectDeptOrgId}).then(res=>{
            this.deptList = res.data
          })
        }
      },
      getUsersDetail(){
        getUsersDetail({userId:this.userId}).then(res=>{
          this.branchLevel=res.data.levels.filter(item=>item.code=='BC').length>=1 //分公司级
          this.companyLevel=res.data.levels.filter(item=>item.code=='CO').length>=1 //公司级
          this.projectLevel=res.data.levels.filter(item=>item.code=='PD').length>=1 //项目级
          // if(this.branchLevel){
          //   let arr = []
          //   let arrs = []
          //   res.data.levels.forEach(item=>{
          //     arr.push(item.name)
          //     arrs.push(item.id)
          //   })
          //   this.form.proposeDeptId = arrs.join(",")
          //   this.form.proposeDept=arr.join(",")
          //   this.form.person = res.data.name
          //   this.branchName = res.data.levels.filter(item=>item.code=='BC')
          //   let list = []
          //   this.branchName.forEach(item=>{
          //     list.push(item.name)
          //   })
          //   this.form.branchName = list.join(",")
          //   console.log(this.branchName)
          // }else if(this.companyLevel){
          //   this.form.branchName = "西南公司"
          // }else{
          //   // this.form.proposeDeptId=''
          //   // this.form.branchName = ''
          // }
        })
      },
      selectProject(value){
        console.log(value)
        let arr=[]
        arr.push(value)
        getProjectType({projectIds:arr}).then(res=>{
          console.log(res.data)
          this.form.projectNum = res.data[0].projectNumber
          this.form.designType = res.data[0].designTypeName
          this.form.designTypeId = res.data[0].designTypeId
          // if(this.form.designType=="B类"){
          //   this.tableData = this.tableData1
          // }else if(this.form.designType=="C类"){
          //   this.tableData = this.tableData2
          // }

        })
      },
      getTypes(){
        getTypes({type:'22'}).then(res=>{
          this.typeList = res.data
        })
      },
      // getjobsList(){
      //   getjobsList().then((res)=>{
      //     this.jobsList = res.data
      //   })
      // },
      getScoreList(){
        getScoreList().then(res=>{
          this.loadData = res.data
        })
      },
      save(){
        console.log(this.fileArrysDatas)
        // this.form.proposeDept=this.proposeDept.label
        // this.form.proposeDeptId = this.proposeDept.key
        this.form.proposePersonName = this.proposePerson.label
        // this.form.
        this.$refs.ruleForm.validate(valid=>{
          if(valid){
            this.form.statusCode='0'
            if(this.id){
              editDemandList(this.form).then(res=>{
                  this.$router.push("/project/design/demand")
                if(res.code='200'){
                  this.$message.success("保存草稿成功")
                }
              })
            }else{
              addDemandList(this.form).then(res=>{
                  this.$router.push("/project/design/demand")
                if(res.code='200'){
                  this.$message.success("保存草稿成功")
                }
              })
            }
          }
        })
      },
      saveSubmit(){
        console.log(this.proposeDept)
        // this.form.proposeDept=this.proposeDept.label
        // this.form.proposeDeptId = this.proposeDept.key
        this.form.proposePersonName = this.proposePerson.label
        // this.form.
        this.$refs.ruleForm.validate(valid=>{
          if(valid){
            this.form.statusCode='1'
            if(this.id){
              editDemandList(this.form).then(res=>{
                  this.$router.push("/project/design/demand")
                if(res.code='200'){
                  this.$message.success("提交成功")
                }
              })
            }else{
              addDemandList(this.form).then(res=>{
                  this.$router.push("/project/design/demand")
                if(res.code='200'){
                  this.$message.success("提交成功")
                }
              })
            }
          }
        })
      },
      goBack(){
        this.$multiTab.close(this.$route.fullpath)
      },
      change(value){
        console.log(value)
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        console.log(selectedRowKeys)
        console.log(selectedRows)
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      search(){
        this.$refs.table.refresh(true)
      },
      goAdd(){
        this.visible = true
      },
      handleSub(record,type){
        this.visible = true
        this.type = type
        this.form = record
      },
      handleEdit(record){
        this.visible = true
        this.form = record
      },
      handleOk(){
        this.visible = false
        if(this.form.id){
          editScoreList(this.form).then((res)=>{
            if(res.code=='200'){
              this.$message.success("编辑成功")
            }
          })
        }else{
          addScoreList(this.form).then((res)=>{
            if(res.code=='200'){
              this.$message.success("新增成功")
            }
            this.$refs.table.refresh(true)
          })
        }
      },
      handleCancel(){
        this.visible = false
      }
    }
  }
</script>

<style scoped>
  .input{
    width:100%
  }  
  .footer{
    float:right;
    margin-right:10px
  }
  .footer button{
    margin-left:10px
  }
  .signBtn{
    float: left;
  }
  .signImg{
    border: 1px solid #d9d9d9;
    width: 290px;
    height: 100px;
    float: left;
    margin-left: 40px;
  }
</style>
